<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //创建一个数组用于保存学期以及所对应的课程
        var courseList = new Array();
        courseList["第一学期"] = ['HTML','NodeJS','MySQL','MongoDB'];
        courseList["第二学期"] = ['JavaScript','JSP','Spring','MongoDB'];
        courseList["第三学期"] = ['HTML','NodeJS','Vue','React'];


        //把所选学期对应的课程赋值给第二个下拉列表
        function changeTerm(){
            //获取到用户所选择选项原值
            var selTerm = document.getElementById("selTerm").value;
            var selCourse = document.getElementById("selCourse");
            
            //如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
            selCourse.options.length = 0;
            for(var i in courseList){
                if(i==selTerm){
                    for(var j in courseList[i]){
                        selCourse.add(new Option(courseList[i][j]),null);
                }
                }               
            }
        }

        //当页面首次加载的时候要调用这个方法，将学期添加到一个select中
        function allTerm(){
            var selTerm = document.getElementById("selTerm");
            for(var i in courseList) {
                //要将courseList中学期添加到selTerm下拉列表中
                selTerm.add(new Option(i),null);
            }
        }
        //触发函数allTerm 方法一：
        // window.onload = allTerm
    </script>
</head>
<!-- 触发函数allTerm 方法二： -->
<body onload="allTerm()">
    <form id="form1" name="form1" action="" method="post">
        <table border="0" align="center">
            <tr>
                <td>学期</td>
                <td>
                    <select name="" id="selTerm" onchange="changeTerm()">
                        <option>请选择学期</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>课程</td>
                <td>
                    <select name="" id="selCourse">
                        <option>请选择学期所对应的课程</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>